<template>
  <van-card
      :desc="userDetail.profile"
      :title="userDetail.username"
      :thumb="userDetail.avatarUrl"
  >
    <template #tags>
      <van-tag plain type="danger" v-for="tag in userDetail.tags" style="margin-right: 8px;margin-top: 8px;">{{tag}}</van-tag>
    </template>
  </van-card>
  <van-tabs v-model:active="activeName">
    <van-tab title="笔记" name="a">
      <blog-card-list :blogList="blogList" :loading="false"/>
      <van-empty v-if="!blogList || blogList.length<1" description="数据为空"/>
    </van-tab>
    <van-tab title="共同关注" name="b">
      <user-card-list :user-list="userCommonList" :loading="false" :isShowButton="false"/>
      <van-empty v-if="!userCommonList || userCommonList.length<1" description="数据为空"/>
    </van-tab>
  </van-tabs>
</template>

<script setup lang="ts">
import {useRoute} from "vue-router";
import {onMounted, ref, watchEffect} from "vue";
import myAxios from "../request/myAxios";
import {UserType} from "../model/user";
import BlogCardList from "../components/BlogCardList.vue";
import {Toast} from "vant";
import UserCardList from "../components/UserCardList.vue";

const route = useRoute()
const userDetail = ref<UserType>({})
const blogList = ref([])
const userCommonList = ref([]);
const activeName = ref('');
watchEffect(async ()=>{
  console.log(activeName);
  if (activeName.value == 'a'){
    const res = await myAxios.get('/user/getUserById/'+route.query.id)
    if (res?.data.code === 0){
      let user = res.data.data;
      if (user.tags) {
        user.tags = JSON.parse(res.data.data.tags);
        userDetail.value = user;
      }
    } else {
      Toast.fail("获取用户信息请求失败")
    }
    const res1 = await myAxios.get('/blog/getBlogsByUserId/'+route.query.id)
    if (res1?.data.code === 0){
      blogList.value = res1.data.data;
    } else {
      Toast.fail("获取用户笔记请求失败")
    }
  } else {
    let userCommonListTemp = [];
    userCommonListTemp = await myAxios.get('/follow/common/' + route.query.id).then(res => {
      if (res?.data.code === 0) {
        return res.data.data;
      }
    })
    if (userCommonListTemp) {
      userCommonListTemp.forEach(user => {
        if (user.tags) {
          user.tags = JSON.parse(user.tags);
        }
      })
      userCommonList.value = userCommonListTemp;
    }
  }
})
</script>

<style scoped>

</style>
